<template>
  <div class="life-detail common-mobile-view">
    <span class="title">{{ foodStore.currentRecipe.name }}</span>

    <section>
      <div class="info-container">
        <food-basic-data/>

        <food-material-data/>

        <food-step-data/>

        <food-others-data/>
      </div>

      <div class="button-container">
        <el-badge :value="foodStore.currentRecipe.likeList.length" :max="9">
          <el-button :type="isLike ? 'danger' : 'default'"
                     circle @click="handleLikeClick()">
            <i class="fa-regular fa-thumbs-up"></i>
          </el-button>
        </el-badge>
        <el-badge v-if="!isCurrentUser"
                  :value="foodStore.currentRecipe.favouriteList.length" :max="9">
          <el-button v-if="!isCurrentUser"
                     :type="isFavourite ? 'danger' : 'default'"
                     circle @click="handleFavouriteClick()">
            <i class="fa-regular fa-star"></i>
          </el-button>
        </el-badge>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import FoodBasicData from '@/components/Food/FoodBasicData.vue'
import FoodMaterialData from '@/components/Food/FoodMaterialData.vue'
import FoodStepData from '@/components/Food/FoodStepData.vue'
import FoodOthersData from '@/components/Food/FoodOthersData.vue'
import { computed, onMounted } from 'vue'
import { useUserStore } from '@/store/user.ts'
import { useFoodStore } from '@/store/food.ts'
import { useAppStore } from '@/store/app.ts'
import { useRoute } from 'vue-router'

const foodStore = useFoodStore()
const appStore = useAppStore()
const route = useRoute()
const userStore = useUserStore()

onMounted(() => {
  appStore.isShowMobileBack = true
  foodStore.queryRecipe(route.params.id as number)
})

const isLike = computed(() => foodStore.currentRecipe.likeList.includes(userStore.getUserId()))
const isFavourite = computed(() => foodStore.currentRecipe.favouriteList.includes(userStore.getUserId()))
const isCurrentUser = computed(() => foodStore.currentRecipe.userId === userStore.getUserId())

const handleLikeClick = () => {
  if (isLike.value) {
    foodStore.deleteRecipeLike(foodStore.currentRecipe.id as number)
  } else {
    foodStore.addRecipeLike(foodStore.currentRecipe.id as number)
  }
}

const handleFavouriteClick = () => {
  if (isFavourite.value) {
    foodStore.deleteRecipeFavourite(foodStore.currentRecipe.id as number)
  } else {
    foodStore.addRecipeFavourite(foodStore.currentRecipe.id as number)
  }
}
</script>

<style lang="scss">
@use "@/styles/life.detail.module.scss";
</style>
